<template>
  <div class="app-wrapper">
    <!-- 左侧边栏 -->
    <Sidebar
      :is-collapse="isCollapse"
      class="sidebar-container"
    />
    <!-- 主容器 -->
    <div
      :class="{ hasTagsView: showTagsView }"
      class="main-container"
    >
      <!-- 头部导航栏和标签栏 -->
      <div class="layout-header">
        <Navbar>
          <template v-slot:left>
            <el-icon
              :size="20"
              @click="toggleExpand"
            >
              <i-ep-expand v-if="isCollapse" />
              <i-ep-fold v-else />
            </el-icon>
          </template>
        </Navbar>
        <TagsView v-show="showTagsView" />
      </div>
      <!-- 页面主体内容 -->
      <AppMain class="app-main" />
      <AppFooter class="layout-footer" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import Sidebar from './Sidebar/index.vue';
import Navbar from './Navbar/index.vue';
import TagsView from './TagsView/index.vue';
import AppMain from './AppMain/index.vue';
import AppFooter from './AppFooter/index.vue';

defineComponent({ name: 'Layout' });

const isCollapse = ref(false);

const showTagsView = ref(true);

const toggleExpand = () => {
  isCollapse.value = !isCollapse.value;
};
</script>

<style lang="scss" scoped>
.app-wrapper {
  height: inherit;
  width: inherit;
  display: flex;

  .sidebar-container {
    height: inherit;
  }

  .main-container {
    flex: 1;
    display: flex;
    flex-direction: column;

    .layout-header {
      height: var(--yy-header-height);
      background-color: var(--yy-header-bg-color);
    }

    .layout-footer {
      height: var(--yy-footer-height);
      background-color: var(--yy-footer-bg-color);
    }
  }
}
</style>
